<template>
    <div id="videos-bg">
      <div class="layout-Ma">
        <div class="layout-main">
          <div class="layout-main-title">
            <h1 title="高下立判了，没有对比就没有伤害">
            {{aname}}
          </h1></div>
          <div class="layout-main-type">
            <a class="type-first" target="_blank" href="" title="网游竞技">{{atype}}</a> &nbsp;&nbsp;
            <span class="type-two"></span> &nbsp;&nbsp;
            <a class="type-three" target="_blank" href="" title="绝地求生">绝地求生</a> &nbsp;&nbsp;
            <span>2021-01-07</span>
          </div>
          <div class="layout-main-volume">
            <span class="volume-first">5.7万播放量</span>
          </div>
          <div class="video" >
            <video ref="video" autoplay="" muted="" loop=""  preload="auto" id="_video" controls="controls">

            </video>
          </div>
          <div class="video-player">
            <div class="video-player-first">160条实时弹幕</div>
            <div class="video-player-two">
              <div class="video-player-two-text">弹</div>
            </div>
            <div class="video-player-three">
              <span class="video-player-three-text"></span>
            </div>
            <div class="video-player-four">
                <div class="video-player-four-1"></div>
                <span class="video-player-four-2" style="margin-left: 5px">
                  请先
                  <span class="video-player-four-3">登录</span>
                  或
                  <span class="video-player-four-4">注册</span>
                </span>
                <div class="video-player-four-5">发送</div>
            </div>
          </div>
          <div class="video-player-toolbar">
            <ul class="video-player-toolbar-one">
              <li class="toolbar-1">
                <svg t="1610009639885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22341" width="30" height="30"><path d="M0.268659 965.467729l210.05672 0 0-453.141101L0.268659 512.326629 0.268659 965.467729zM1001.748882 710.444617c13.251043-17.407861 20.987981-42.077909 20.987981-71.177632 0-29.279628-7.839884-54.117588-21.208865-71.501462 9.824842-13.77077 15.534844-31.955224 15.534844-52.618375 0-28.656955-11.265086-57.092027-30.855801-77.935084-16.650259-17.698708-47.293171-38.753654-98.880088-38.753654l-151.712351 0c-76.40089 0-107.98031-5.870918-120.370805-9.671922 0.366807-0.963494 0.81857-2.044926 1.21836-3.357237 9.459034-24.915919 26.943854-71.280578 26.943854-244.234777 0-48.835361-31.443492-141.196872-150.55196-141.196872-31.672372 0-66.8569 2.999425-87.708953 25.265735-23.202819 24.677045-18.516279 59.418805-11.938732 107.537543 4.379701 32.124135 9.782864 72.106144 9.782864 122.253817C402.937258 410.132281 263.513455 517.304015 262.124185 518.34347l-10.907274 8.248669 0 419.260888 4.328727 6.62952c10.770346 16.386397 72.480948 69.916294 412.938207 69.916294l218.842108 0c51.586917 0 82.229829-21.055946 98.880088-38.737663 19.589715-20.912021 30.855801-49.278129 30.855801-77.960071 0-20.663152-5.710002-38.823618-15.534844-52.626371 13.369981-17.399865 21.208865-42.205842 21.208865-71.519452C1022.735864 752.497539 1014.998926 727.82849 1001.748882 710.444617z" p-id="22342"></path></svg>
                <!--<i style="width: 27px;height: 23px;"></i>-->
                <span class="toolbar-1-1">4</span>
              </li>
              <li class="toolbar-2">
                <svg t="1610010941132" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23083" width="30" height="30"><path d="M1024 384a103.04 103.04 0 0 0-72.32-64l-215.68-58.24L590.72 49.92A101.12 101.12 0 0 0 512 0a92.8 92.8 0 0 0-78.72 51.84l-120.32 192-161.28 49.28L72.96 320a97.28 97.28 0 0 0-68.48 56.96 115.2 115.2 0 0 0 19.84 97.28l140.8 178.56-7.68 256a117.76 117.76 0 0 0 17.92 88.96 64 64 0 0 0 49.92 21.12 181.76 181.76 0 0 0 60.8-13.44l208-84.48 236.16 87.68a141.44 141.44 0 0 0 42.88 7.68c29.44 0 78.72-13.44 82.56-103.68l-12.8-230.4 152.96-205.44A106.88 106.88 0 0 0 1024 384" p-id="23084"></path></svg>
                <span class="toolbar-2-1">收藏</span>
              </li>
              <li class="toolbar-3">
                <svg t="1610011427658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23887" width="30" height="30"><path d="M565.934 817.574a34.816 34.816 0 0 0 9.818 29.394l0.302 0.241a35.539 35.539 0 0 0 25.6 10.963c11.143 0 20.66-5.42 27.226-13.312l354.545-387.072a35.117 35.117 0 0 0 10.24-27.106 35.057 35.057 0 0 0-10.24-27.106L626.892 14.336a36.503 36.503 0 0 0-51.2 0 34.936 34.936 0 0 0-9.758 29.395V253.35c-295.996 0-535.974 238.893-535.974 533.684a529.468 529.468 0 0 0 44.454 212.51C116.7 777.276 329.812 608.437 565.332 608.437l0.602 209.137z" p-id="23888"></path></svg>
                <span class="toolbar-3-1">3</span>
              </li>
            </ul>
            <a class="toolbar-4" href="https://kefu.douyu.com/nx/index.html" target="_blank">稿件投诉</a>
          </div>
          <div class="video-player-desc">
            <div class="desc-1">
              <div class="desc-1-1"></div>
              <div class="desc-1-2">
                    <a target="_blank" href=""><strong>小叮当</strong></a>
                    <a target="_blank" href=""><strong><span>吃鸡大神</span></strong></a>
                    <a target="_blank" href=""><strong><span>左梓轩</span></strong></a>
              </div>
            </div>
          </div>
          <div></div>
          <div></div>
        </div>

      </div>
      <div class="layout-As">
        <div class="As-1" style="height: 150px;width: 100%;" >
          <div class="As-1-photo" style="width: 120px;float: left"><a href=""><img src="//apic.douyucdn.cn/upload/avanew/face/201709/03/15/2958546e2f2e4d7c0bf0238759521ff8_middle.jpg?rltime" style="overflow: hidden;border-radius: 50%"> </a> </div>
          <div class="As-1-user" style="display: inline-block;float: left;margin-top: 10px;margin-left: 30px">
            <div class="As-1-user-icon">
              <div class="icon-nameinfo">
                <a class="icon-live" href="//www.douyu.com/3168536">直播中</a>
                <a class="icon-name" href="">小叮当</a>
              </div>
            </div>
            <button class="As-1-user-focus">
              <div class="focus-1"></div>
              <div class="focus-2"><span>关注</span>787.2万</div>
            </button>
          </div>
        </div>
        <div class="As-2">
          <div>
            <div class="videohelpertaps">
              <a selected="" style="color: #ff5d23;border-bottom: 2px solid #ff5d23;"><span class="videotaps" style="display: inline-block;line-height: 46px;pointer-events: none">推荐视频</span></a>
              <a selected="" style="-moz-box-flex: 1;flex: 1px;cursor: pointer"><span class="videotaps" style="display: inline-block;line-height: 46px;pointer-events: none">弹幕列表</span></a>
            </div>
            <div style="display: block">
              <demand-video-recommand-list>
                <div class="recommand-list" style="margin-top: 20px">
                  <demand-router-link class="playerVideoItem" href="/show/GnzXvbwkNag7462l?ap=1">
                    <div class="item-image">
                      <img src="https://sta-op.douyucdn.cn/vod-cover/2021/01/07/ea30f335ee49b7dbb20ecdb67c5781e2.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                      <div class="image-cover">
                        06:52
                      </div>

                    </div>
                    <div class="item-content">
                      <div class="item-title ">
                        我已经把他打蒙了，他快看不懂怎么打了
                      </div>
                      <div class="item-name"><!---->Xleft小叮当<!----></div>
                      <div class="item-info"><!---->6.2万播放</div>
                    </div>
                  </demand-router-link>
                </div>
              </demand-video-recommand-list>
              <demand-router-link class="playerVideoItem" href="/show/JmbBMkVQrLy740XA?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2021/01/07/b8a3864121893e7fae3a5dc84c371426.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    04:58
                  </div>

                </div>
                <div class="item-content">
                  <div class="item-title ">
                    我一把枪够了呀，非要捡两把干什么玩意儿
                  </div>
                  <div class="item-name"><!---->Xleft小叮当<!----></div>
                  <div class="item-info"><!---->7.4万播放</div>
                </div>
              </demand-router-link>
              <demand-router-link class="playerVideoItem" href="/show/mPyq7oQzeYVW1gLY?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2021/01/12/efd26b7695ed96221d22ece0bea8854f.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    06:26
                  </div>
                </div>
                <div class="item-content">
                  <div class="item-title ">
                    铁汁你一直守护在我旁边，这把我必带你吃鸡
                  </div>
                  <div class="item-name"><!---->Xleft小叮当<!----></div>
                  <div class="item-info"><!---->10.8万播放</div>
                </div>
              </demand-router-link>
              <demand-router-link class="playerVideoItem" href="/show/85BAvq9VY6RvG4Lm?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2021/01/11/73ee91ce32dc7f33777cf0a62d321893.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    05:39
                  </div>

                </div>
                <div class="item-content">
                  <div class="item-title ">
                    一切都在计算之内，包括最终的胜利
                  </div>
                  <div class="item-name"><!---->Xleft小叮当<!----></div>
                  <div class="item-info"><!---->12.4万播放</div>
                </div>
              </demand-router-link>
              <demand-router-link class="playerVideoItem" href="/show/85BAvq9DDdRvG4Lm?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2020/12/31/f3506b9716851ff5aee8c397f31447f8.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    04:40
                  </div>

                </div>
                <div class="item-content">
                  <div class="item-title ">
                    绕背就是一锅，这鸡吃的舒坦
                  </div>
                  <div class="item-name"><!---->Xleft小叮当<!----></div>
                  <div class="item-info"><!---->11.6万播放</div>
                </div>
              </demand-router-link>
              <demand-router-link class="playerVideoItem" href="/show/8pa9v5E6BVKvVrqA?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2020/12/17/af390a1382c546fa97e81d2554ef47c0.png/vdy1" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    00:51
                  </div>

                </div>
                <div class="item-content">
                  <div class="item-title ">
                    如果你在飞机上遇到茄子会发生什么？
                  </div>
                  <div class="item-name"><!---->Big茄子<!----></div>
                  <div class="item-info"><!---->12.4万播放</div>
                </div>
              </demand-router-link>
              <demand-router-link class="playerVideoItem" href="/show/qJgOWxabkxyvkVzL?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2020/12/18/8d360a95ff8c552d4a671700f1759035.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    02:10
                  </div>

                </div>
                <div class="item-content">
                  <div class="item-title ">
                    看小叮当如何卡死一标的人！像个战神一样
                  </div>
                  <div class="item-name"><!---->Xleft小叮当<!----></div>
                  <div class="item-info"><!---->8.3万播放</div>
                </div>
              </demand-router-link>
              <demand-router-link class="playerVideoItem" href="/show/qJgOWxaJ80XvkVzL?ap=1">
                <div class="item-image">
                  <img class="item-img" src="https://sta-op.douyucdn.cn/vod-cover/2020/12/14/bebc22b3ffbc1dd7678634c708e11ab0.jpg" style="width: 100%;height: 100%;display: inline-block;vertical-align: middle;">
                  <div class="image-cover">
                    02:18
                  </div>

                </div>
                <div class="item-content">
                  <div class="item-title ">
                    小叮当试玩新地图，遭遇铁王八车
                  </div>
                  <div class="item-name"><!---->Xleft小叮当<!----></div>
                  <div class="item-info"><!---->26.8万播放</div>
                </div>
              </demand-router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import axios from "axios";
    export default {
        name: "videos",
      data() {
          return{
            ids:'',
            url:'',
            atype:'',
            aname:'',

          }

      },
      methods: {
        goodsvideos: function (id) {
          axios.post("http://localhost:7000/live-live/videos/findGoodVideos",{
            id:id
          }).then(res=>{
            if (res.data.code==200){
              this.aname=res.data.data[0].vName;
              this.url=res.data.data[0].vUrl;
              this.atype=res.data.data[0].aType;
              this.$refs.video.src = res.data.data[0].vUrl;
            }
          })

        },

      },
      mounted(){
          var id = this.$route.params.id;
          this.goodsvideos(id);
      }
    }
</script>

<style scoped>
  .item-image {
    display: inline-block;
    position: relative;
    width: 140px;
    height: 80px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    vertical-align: top;
    overflow: hidden;
  }
  .item-image {
    display: inline-block;
    position: relative;
    width: 140px;
    height: 80px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    vertical-align: top;
    overflow: hidden;
  }

  .item-info {
    font-size: 12px;
    color: #999;
  }
  .item-name {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
    height: 17px;
  }
  .item-title {
    line-height: 18px;
    font-size: 14px;
    height: 36px;
    color: #222;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 5px;
  }
  .item-content {
    display: inline-block;
    margin-left: 12px;
    max-width: 180px;
  }
  .image-cover {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: white;
    padding: 0 4px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  .playerVideoItem {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    cursor: pointer;
    font-size: 0;
  }
  .playerVideoItem {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    cursor: pointer;
    font-size: 0;
  }
  .item-image {
    display: inline-block;
    position: relative;
    width: 140px;
    height: 80px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    vertical-align: top;
    overflow: hidden;
  }
  #videos-bg{
    display: flex;
    min-width: 1170px;
    max-width: 1660px;
    padding: 75px 75px 15px;
    margin: 0 auto;
    /*background: bisque;*/
  }
  .layout-Ma{
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /*background: aqua;*/
  }
  .As-1-user-focus{
    width: 150px;
    height: 30px;
    background: #ff5d23;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 0;
    color: #fff;
    line-height: 30px;
    text-align: center;
    margin-top: 4px;
    cursor: pointer;
  }
  .focus-1{
    width: 12px;
    height: 12px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/c04215c6db7c277b5b639b4f88b0cf28.png) no-repeat;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .focus-2{
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
  }

  .layout-As{
    width: 332px;
    margin-left: 20px;
    /*background: chocolate;*/
  }
  .As-1-user-icon{
    height: 56px;
    display: table-cell;
    vertical-align: middle;

  }
  .icon-nameinfo{
    height: 22px;
    line-height: 22px;
  }
  .icon-live{
    border: 1px solid #ff5d23;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 10px;
    color: #ff5d23;
    display: inline-block;
    margin-right: 8px;
    cursor: pointer;
    height: 18px;
    width: 46px;
    text-align: center;
    line-height: 18px;
  }
  .icon-name{
    font-size: 16px;
    color: #222;
    max-width: 200px;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
  }
  .videohelpertaps{
    display: flex;
    background: #f0f0f0;
    text-align: center;
    font-size: 14px;
  }
  .layout-main-type{
    line-height: 20px;
    margin-bottom: 8px;
  }
  .type-first{
    margin-right: 2px;
  }
  .type-two{
    display: inline-block;
    margin: 0 5px;
    width: 6px;
    height: 8px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/4fc667bcbeff73dccf050c1777a1f705.png) no-repeat;
  }
  .layout-main-volume{
    line-height: 30px;
    margin-bottom: 8px;
  }
  .video{
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  #_video{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  .video-player{
    position: relative;
    height: 48px;
    background: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .15);
    box-shadow: 0 0 4px rgba(0, 0, 0, .15);
  }
  .video-player-first{
    position: absolute;
    left: 20px;
    width: 180px;
    line-height: 48px;
    color: #505050;
    font-size: 14px;
  }
  .video-player-two{
    position: absolute;
    top: 13px;
    left: 215px;
    width: 32px;
    background-color: #ff5d23;
    height: 22px;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    cursor: pointer;
  }
  .video-player-two-text{
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    text-align: center;
    background-color: #fff;
    color: #ff5d23;
  }
  .video-player-three{
    position: absolute;
    left: 268px;
    top: 14px;
  }
  .video-player-three-text{
    display: inline-block;
    width: 25px;
    height: 20px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/fb4e5669b89b86511d9f5b330c3414f7.png) no-repeat;
  }
  .video-player-four{
    position: relative;
    top: 9px;
    height: 30px;
    margin: 0 20px 9px 309px;
    padding: 5px 64px 5px 26px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #eee;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
    color: #737373;
  }
  .video-player-four-1{
    position: absolute;
    left: 10px;
    top: 0;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/ae350b42fca73e90c2aa1db15b02b3ae.png) center center no-repeat;
    width: 16px;
    height: 30px;
  }
  .video-player-four-3{
    vertical-align: top;
    color: #ff5d23;
    cursor: pointer;
  }
  .video-player-four-4{
    vertical-align: top;
    color: #ff5d23;
    cursor: pointer;
  }
  .video-player-four-5{
    position: absolute;
    right: 0;
    top: 0;
    width: 64px;
    text-align: center;
    line-height: 30px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    background-color: #cecdcd;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }
  .video-player-toolbar{
    height: 48px;
    position: relative;
    display: flex;
    padding: 0 10px;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: justify;
    justify-content:space-between;
    border-bottom: 1px solid #e5e9ef;
  }
  .video-player-toolbar-one{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toolbar-1{
    float: left;
    font-size: 0;
    color: #505050;
    margin-right: 41px;
    cursor: pointer;
  }
  /*.toolbar-1 i{
    background: url("http://www.w3.org/2000/svg");
  }*/
  .toolbar-1-1{
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    margin-left: 15px;
    margin-top: -20px;
  }
  .toolbar-2{
    float: left;
    font-size: 0;
    color: #505050;
    margin-right: 41px;
    cursor: pointer;
  }
  .toolbar-2-1{
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    margin-left: 15px;
    margin-top: -20px;
  }
  .toolbar-3{
    float: left;
    font-size: 0;
    color: #505050;
    margin-right: 41px;
    cursor: pointer;
  }
  .toolbar-3-1{
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    margin-left: 15px;
    margin-top: -20px;
  }
  .toolbar-4{
    font-size: 14px;
    color: #505050;
  }
  .desc-1{
    padding: 20px 0;
    border-bottom: 1px solid #e5e9ef;
  }
  .desc-1-1{
    max-height: 60px;
    overflow: hidden;
  }
  .desc-1-2{
    line-height: 24px;
    color: #666666;
    font-size: 14px;
  }
  .desc-1-2 a{
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    background: #f4f4f4;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
  }







</style>
